<template>
    <el-form ref="loginForm" :model="loginFormData" :label-width="0" :rules="rules" status-icon autocomplete="off"
        class="formPanel">

        <el-form-item label="" prop="username">
            <el-input :prefix-icon="Avatar" :autocomplete="false" v-model="loginFormData.username" placeholder="账号" @keyup.enter="onSubmit" />
        </el-form-item>



        <el-form-item label="" prop="password">
            <el-input type="password" autocomplete="new-password" :prefix-icon="Unlock" v-model="loginFormData.password"
                placeholder="密码" @keyup.enter="onSubmit"/>
        </el-form-item>




        <!-- <div class="flex">
            <div class="flex-item">
                <el-form-item label="" prop="code">
                    <el-input autocomplete="new-password" :prefix-icon="Picture" v-model="loginFormData.code"
                        placeholder="验证码" @click="changeCode" />
                </el-form-item>
            </div>
            <div class="code" @click="refreshCode">
                <ValidateCode :identifyCode="identifyCode" :backgroundColorMin="240" :backgroundColorMax="255" />
            </div>
        </div> -->




        <!-- <div class="check-line">
            <div>
                <el-form-item label="">
                    <el-checkbox v-model="loginFormData.rememberPassword" label="记住密码" size="large" />
                </el-form-item>
            </div>
        </div> -->


        <el-form-item>
            <el-button class="btn-login" type="danger" @click="onSubmit">登录</el-button>
        </el-form-item>



    </el-form>
</template>

<script setup>
import {
    ref,
    reactive,
    onMounted,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { Unlock, Avatar } from '@element-plus/icons-vue'
// import ValidateCode from '../ValidateCode/index.vue'
import { postLogin } from "src/api/user/index";
import { useUserStore } from "src/stores/modules/user";
import { initDynamicRouter } from "src/router";
const userStore = useUserStore()
const router = useRouter();
const route = useRoute();
const config = {
    lineHeight: '30px',
    bgColor: '#fff'
}
// const option = {
//     lineHeight: '30px',
//     bgColor: '#ddd'
// };

const lineHeight = ref(config.lineHeight); //输入行高
// const bgColor = ref(config.bgColor); //背景色
const otherQuery = reactive({
    redirect: undefined,
    query: {}
})

let identifyCode = ref('') //图形验证码
let identifyCodes = ref('1234567890abcdefjhijklinopqrsduvwxyz') //验证码出现的数字和字母

const getOtherQuery = (query) => {
    return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
            acc[cur] = query[cur]
        }
        return acc
    }, {})
}
const initRedirectData = () => {
    const query = route.query
    otherQuery.redirect = query.redirect
    otherQuery.query = getOtherQuery(query)
}
//组件挂载
onMounted(() => {
    identifyCode.value = ''
    makeCode(identifyCodes.value, 4)
    initRedirectData()
})

// 生成随机数
const randomNum = (min, max) => {
    max = max + 1
    return Math.floor(Math.random() * (max - min) + min)
}
// 随机生成验证码字符串
const makeCode = (o, l) => {
    for (let i = 0; i < l; i++) {
        identifyCode.value += o[randomNum(0, o.length)]
    }
}
// 更新验证码
// const refreshCode = () => {
//     identifyCode.value = ''
//     makeCode(identifyCodes.value, 4)
// }

// 登录表单数据
const loginFormData = reactive({
    // username: 'admin',
    // password: '123456',
    username: '',
    password: '',
    code: '',
    rememberPassword: false
});
const loginForm = ref();
const rules = reactive({
    username: [{
        required: true,
        message: '请输入账号',
        trigger: 'blur'
    }],
    code: [{
        required: true,
        message: '请输入验证码',
        trigger: 'blur'
    }],
    password: [{
        required: true,
        message: '请输入密码',
        trigger: 'blur'
    }],
})

//登录操作
const onSubmit = () => {
    loginForm.value.validate(async (valid, fields) => {
        if (valid) {
            try {
                console.log(loginFormData);
                const { data } = await postLogin({loginname: loginFormData.username, pw: loginFormData.password})
                userStore.setUserData(data)
                initDynamicRouter();
                setTimeout(() => {
                    router.push({ path: otherQuery.redirect || '/clue', query: { ...otherQuery.query } })
                }, 100);
            } catch (error) {
                console.error(error);
            }
        }
    });
}

</script>

<style scoped lang="scss">
.theme-default .formPanel {
    color: #000;
    font-size: 20px;
    margin-top: 30px;
}

.theme-default .formPanel:deep(.el-form-item) {
    margin-top: 30px;
}

.theme-default .formPanel:deep(.el-checkbox__label) {
    color: v-bind(textColor);
}

.theme-default .formPanel:deep(.el-form-item__error) {
    height: 3vh;
    line-height: 3vh;
}

.theme-default .formPanel:deep(.el-form-item__label) {
    line-height: v-bind(lineHeight);
    height: v-bind(lineHeight);
}

.theme-default .formPanel:deep(.el-form-item__content),
.theme-default .formPanel:deep(.el-input__inner) {
    line-height: v-bind(lineHeight);
    height: v-bind(lineHeight);
}

.theme-default .formPanel :deep(input) {
    background: #fff !important;
}

.theme-default .formPanel .check-line {
    display: flex;
}

.theme-default .formPanel .check-line .line-item {
    flex: 1;
}

.theme-default .formPanel :deep(.el-button) {
    width: 100%;
    line-height: v-bind(lineHeight);
    height: v-bind(lineHeight);
    border-radius: v-bind(lineHeight);
}

.theme-default .formPanel .code {
    width: 105px;
    height: calc(v-bind(lineHeight) + 2px);
    padding-left: 10px;
    cursor: pointer;
}

.theme-default .formPanel .resetPassword {
    line-height: v-bind(lineHeight);
    height: v-bind(lineHeight);
    text-decoration: none;
    color: #f44336;
    font-size: 14px;
}

.btn-login {
    width: 100%;
    margin-top: 5px;
}
</style>